
/* ==========================================================================
   box-sizing
   ========================================================================== */
.esri-widget {
  box-sizing: border-box;
  color: $text_color;
  font-size: $text_size;
  font-family: $font_family;
  line-height: $line_height;
  background-color: $background_color;
  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }
  a {
    text-decoration: none;
    color: $anchor_color;
    :hover {
      color: $anchor_hover_color;
    }
  }
  h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    margin: 0 0 0.5rem 0;
  }
  .esri-menu {
    position: absolute;
    top: $menu_placement;
    left: 0;
    z-index: 1;
    background-color: $background_color;
    @include defaultBoxShadow();
    padding: 0;
    margin: $menu_gap 0 0 0;
    font-size: 14px;
    line-height: 16px;
    -moz-background-clip: padding;
    background-clip: padding-box;
    overflow: hidden;
    width: 100%;
    visibility: hidden;
    max-height: 0;
    .esri-header {
      padding: 6px 12px;
      background-color: $list_header_color;
      color: $button_text_hover_color;
    }
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    li {
      padding: .8em 1em;
      cursor: pointer;
      border-top: solid 1px $border_color;
    }
    li:first-child {
      border: none;
    }
    li:hover,
    li:focus {
      background-color: $background_hover_color;
    }
    li:active {
      background-color: $background_active_color;
      color: $active_text_color;
    }
    li.esri-active {
      background-color: $background_active_color;
      color: $active_text_color;
      cursor: default;
    }
    li [class^="esri-icon"] {
      padding-right:  $text_size * 0.2;
    }
  }
  table {
    color: $text_color;
    border: none;
    border-collapse: collapse;
    width: 100%;
    tr:nth-child(odd) {
      background-color: rgba($background_inverse_color, 0.1);
    }
    tr:nth-child(even) {
      background-color: rgba($background_inverse_color, 0.02);
    }
    tr {
      a {
        color: $text_color;
      }
      td,
      th {
        padding: .5em .7em;
        word-break: break-word;
        vertical-align: top;
        font-size: $body_text_size;
        font-weight: $text_weight_normal;
      }
      th {
        width: 50%;
        text-align: left;
        border-right: 3px solid rgba(0, 0, 0, 0.05);
      }
      td {
        width: 50%;
      }
    }
  }
  input {
    font-family: inherit;
    &::-ms-clear {
      display: none;
    }
    &::-moz-placeholder {
      color: $placeholder_color;
      opacity: 1;
    }
    &:-ms-input-placeholder {
      color: $placeholder_color;
    }
    &::-webkit-input-placeholder {
      color: $placeholder_color;
    }
  }
  button,
  [role="button"] {
    font-family: inherit;
    font-size: $text_size;
  }
}

// Select
.esri-select {
  cursor: pointer;
  display: block;
  width: 100%;
  height: $button_height;
  color: $button_text_color;
  border: 1px solid $border_color;
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 0;
  padding: 0 0.5em;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2032%2032%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Cstyle%3E.path%7Bfill%3A%236e6e6e%7D%3C/style%3E%3Cpath%20class%3D%27path%27%20d%3D%27M12.3%2013.4h9l-5.7%206.1-5.7-6.1h2.4zm3.3%204.8l3.7-4h-7.4l3.7%204z%27/%3E%3C/svg%3E") no-repeat right center transparent;
}
.esri-select::-ms-expand {
  display: none;
}

// Disabled
button.esri-disabled {
  opacity: $disabled_opacity;
}
.esri-disabled a,
.esri-disabled [class*="esri-icon"],
.esri-disabled [role="menu"],
.esri-disabled [role="checkbox"] {
  color: $disabled_color;
}

.keynav-mode {
  .esri-widget {
  //  Saving this for when we can toggle a key-nav class
  &:focus {
    @include outlineStyle();
  }
  * {
    &:focus {
        @include outlineStyle();
      }
    }
  }
}

/* ==========================================================================
   Widget Button
   ========================================================================== */
.esri-widget-button {
  font-size: $text_size;
  background-color: $background_color;
  color: $button_text_color;
  width: $button_width;
  height: $button_height;
  padding: 0;
  margin: 0;
  overflow: hidden;
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  transition: background-color 125ms ease-in-out;
  &:hover {
    background-color: $background_hover_color;
    color: $button_text_hover_color;
  }
  &:active {
    background-color: $background_active_color;
    color: $active_text_color;
  }
}

/* ==========================================================================
   UI Corners
   ========================================================================== */
.esri-ui-corner {
  .esri-component {
    @include defaultBoxShadow();
  }
  .esri-widget--panel {
    width: $panel_width;
    min-height: $panel_min_height;
  }
}

@include componentHeight_BasedOnViewSize(esri-widget--panel);

.esri-ui-bottom-right,
.esri-ui-bottom-left {
  .esri-widget {
    .esri-menu {
      top: auto;
      bottom: $menu_placement;
      margin-top: 0;
      margin-bottom: $menu_gap;
    }
  }
}

/* ==========================================================================
   RTL
   ========================================================================== */
html[dir="rtl"] .esri-widget {
  table {
    th {
      text-align: right;
      border-right: none;
      border-left: 3px solid rgba(0, 0, 0, 0.05);
    }
  }
  select {
    background-position: left 50%;
  }
  .esri-menu ul li [class^="esri-icon"] {
    padding-right: 0;
    padding-left: $text_size * 0.2;
  }
}

/* ==========================================================================
   accessibility
   ========================================================================== */

.esri-icon-font-fallback-text {
  clip: rect(0 0 0 0);
  overflow: hidden;
  position: absolute;
  height: 1px;
  width: 1px;
}

/* ==========================================================================
   animation
   ========================================================================== */

[class^="esri-icon"] {
  // fixes IE11 bug where animation will continue after animation class is removed
  // https://devtopia.esri.com/WebGIS/arcgis-js-api/issues/4784
  animation: none;
}

@keyframes esri-fade-in {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes looping-progresss-bar-ani {
  @include _loopingProgressBar($looping_progress_bar_width);
}

.esri-rotating {
  animation: esri-anim-rotate 1250ms infinite linear;
}

@keyframes esri-anim-rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   clearfixing
   ========================================================================== */

/**
 * taken from http://nicolasgallagher.com/micro-clearfix-hack/
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.esri-clearfix {
  &:before,
  &:after {
    content: " "; /* 1 */
    display: table; /* 2 */
  }

  &:after {
    clear: both;
  }
}

/* ==========================================================================
   interaction
   ========================================================================== */

.esri-interactive {
  cursor: pointer;
}

/* ==========================================================================
   visibility
   ========================================================================== */

.esri-hidden {
  display: none !important;
}

.esri-invisible {
  visibility: hidden !important;
}

.esri-offscreen {
  position: absolute;
  top: -999em;
  left: -999em;
}
